import { useNavigate, useParams, useSearchParams } from "react-router-dom"

export function withRouter (OriginComponent) {
  function NewComponent (props) {
    const navigate = useNavigate()
    // 1. path参数 /detail/:id => /detail/111 => { id: "111" }
    const params = useParams()
    // 3. query参数 /detail?id=111&type=1 => { id: "111", type: "1" }
    const [searchParams] = useSearchParams()
    const query = Object.fromEntries(searchParams.entries())
    
    const router = { navigate, params, query }
    return (
      <OriginComponent { ...props } router={router} />
    )
  }
  return NewComponent
}